<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <!-- 定义挂载点 -->
    <div id="app">
        <p>{{user}}</p>
        <button @click="addAge">添加age</button>
        <button @click="changeName">修改姓名</button>


        <div v-for="item in mock">
            <h4>姓名：{{item.name}}</h4>
            <h4>年龄：{{item.age}}</h4>
            <h4>身高：{{item.height}}</h4>
        </div>
        <button @click="addHeight">身高：180</button>
    </div>

    <script>
        new Vue({
            //挂载点
            el: "#app",
            //数据
            data: {
                user: {
                    name: "小李"
                },
                mock: [{
                    id: 1,
                    name: "张三",
                    age: 20
                },
                {
                    id: 2,
                    name: "李四",
                    age: 30
                }
                ]
            },
            //方法
            methods: {
                changeName() {
                    this.user.name = "大力";
                },
                addAge() {

                    /* 
                     一个json属性，如果是在data中声明了这个属性，vue会自动给他加上set和get方法，如果属性改变，会引起页面的重新渲染

                     vue3已经解决了这个问题

                       this.user.age = 20  不会重新渲染，没有get和set
                    */

                    //1. Vue.set(json,key,value)
                    // Vue.set(this.user,"age",20);

                    //2. vue.$set(json,key,value)  用这个
                    // this.$set(this.user,"age",20)

                    //3.整体给json赋值，添加上你要添加的属性
                    this.user = {
                        ...this.user,
                        age: 20
                    }

                },
                addHeight() {
                    //问题：先没有在data中定义height属性，没有set和get，数据改变页面不会发生变化
                    this.mock.forEach((item,index) => {
                        
                        // vue.$set(json,index,value)  用这个
                        this.$set(this.mock, index, {
                            ...this.mock[index],
                            height: 180
                        })
                    });

                    console.log(this.mock);
                }

            }
        })


        /* 
         对象：
            this.$set(对象,key,value)
         数组：
            this.$set(数组,index,{
                ...this.arr[index],
                height:180
            })
        */

    </script>
</body>

</html>